<style lang="less">
    @import '~@styles/upload.less';
</style>
<template>
    <div>
        <Col span="18">
            <Card>
                <p slot="title">
                    <Icon type="edit"></Icon>
                    编辑用户信息
                </p>
                <div>
                    <Form ref="editUserForm" :model="editUserForm" :rules="ruleEditUser"
                          label-position="right" :label-width="120">
                        <FormItem label="用户名：" prop="name">
                            <!-- <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.name"></Input>
                            </div> -->
                            <span>{{ editUserForm.name }}</span>
                        </FormItem>
                        <FormItem label="姓名：" prop="realname">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.realname"></Input>
                            </div>
                        </FormItem>
                        <FormItem label="手机：" prop="phone">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.phone"></Input>
                            </div>
                        </FormItem>
                        <FormItem label="所属联赛：" prop="league">
                            <div style="display:inline-block;width:50%">
                                <Select v-model="editUserForm.league_id" @on-change="get_select_league">
                                    <Option v-for="item in leagueList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                </Select>
                            </div>
                        </FormItem>
                        <FormItem label="所属杯赛：" prop="cup">
                            <div style="display:inline-block;width:50%">
                                <Select v-model="editUserForm.cup_id" @on-change="get_select_cup">
                                    <Option v-for="item in cupList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                </Select>
                            </div>
                        </FormItem> 
                        <FormItem label="年龄：" prop="age">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.age" number='number'></Input>
                            </div>
                        </FormItem>
                        <FormItem label="号码：" prop="number">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.number" number='number'></Input>
                            </div>
                        </FormItem>
                        <FormItem label="身高：" prop="height">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.height">
                                    <span slot="append">cm</span>
                                </Input>
                            </div>
                        </FormItem>
                        <FormItem label="体重：" prop="weight">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.weight">
                                    <span slot="append">kg</span>
                                </Input>
                            </div>
                        </FormItem>
                        <FormItem label="实力：" prop="strength">
                            <div style="display:inline-block;width:50%">
                                <!-- <Input v-model="editUserForm.strength"></Input> -->
                                <Select v-model="editUserForm.strength" @on-change="get_select_strength">
                                    <Option :value="1">★</Option>
                                    <Option :value="2">★★</Option>
                                    <Option :value="3">★★★</Option>
                                    <Option :value="4">★★★★</Option>
                                    <Option :value="5">★★★★★</Option>
                                </Select>
                            </div>
                        </FormItem>
                        <FormItem label="分档：" prop="level">
                            <div style="display:inline-block;width:50%">
                                <!-- <Input v-model="editUserForm.level"></Input> -->
                                <Select v-model="editUserForm.level" @on-change="get_select_level">
                                    <Option :value="0">门将档</Option>
                                    <Option :value="1">一档</Option>
                                    <Option :value="2">二档</Option>
                                    <Option :value="3">三挡</Option>
                                    <Option :value="4">四挡</Option>
                                    <Option :value="5">五挡</Option>
                                    <Option :value="6">六挡</Option>
                                    <Option :value="7">七挡</Option>
                                    <Option :value="8">八挡</Option>
                                    <Option :value="9">九挡</Option>
                                </Select>
                            </div>
                        </FormItem>
                        <FormItem label="擅长位置：" prop="site">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.site"></Input>
                            </div>
                        </FormItem>
                        <FormItem label="加入联盟赛季：" prop="join_season">
                            <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.join_season"></Input>
                            </div>
                        </FormItem>
                        <FormItem label="加入联盟日期：" prop="join_date">
                            <div style="display:inline-block;width:50%">
                                <!-- <Input v-model="editUserForm.join_date"></Input> -->
                                <DatePicker :value="editUserForm.join_date" size="large" type="date" placeholder="请选择日期" placement="right" @on-change="get_join_date"></DatePicker>
                            </div>
                        </FormItem>
                        <!-- <FormItem label="邮箱：">
                            <span>{{ editUserForm.email }}</span>
                        </FormItem> -->
                        <FormItem label="是否可登录后台">
                            <RadioGroup v-model="editUserForm.is_admin">
                                <Radio label="F">否</Radio>
                                <Radio label="T">是</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="创建时间：" prop="created_at">
                            <!-- <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.name"></Input>
                            </div> -->
                            <span>{{ editUserForm.created_at }}</span>
                        </FormItem>
                        <FormItem label="最近登录时间：" prop="last_login_at">
                            <!-- <div style="display:inline-block;width:50%">
                                <Input v-model="editUserForm.name"></Input>
                            </div> -->
                            <span>{{ editUserForm.last_login_at }}</span>
                        </FormItem>
                        <!-- <FormItem label="头像：">
                            <div style="display:inline-block;width:50%">
                                <Upload
                                        :show-upload-list="false"
                                        :on-success="handleSuccess"
                                        :on-format-error="handleFormatError"
                                        :on-exceeded-size="handleMaxSize"
                                        :headers="uploadConfig.headers"
                                        :max-size="uploadConfig.max_size"
                                        :format="uploadConfig.format"
                                        name="avatar"
                                        type="drag"
                                        :action="uploadConfig.uploadUrl"
                                        style="display: inline-block;width:58px;"
                                >
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <img class="head_image" :src="editUserForm.head_image.url" alt=""
                                     v-if="editUserForm.head_image.url">
                            </div>
                        </FormItem> -->
                        <FormItem>
                            <Button type="primary" :loading="loading" @click="handleSubmit">保存 </Button>
                        </FormItem>

                    </Form>
                </div>
            </Card>
            <Spin size="large" fix v-if="open_loading"></Spin>
        </Col>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                open_loading:true,
                info_loading:true,
                league_loading:true,
                cup_loading:true,
                loading: false,
                leagueList: [],
                cupList: [],
                editUserForm: {
                    id: this.$route.params.user_id,
                    name: '',
                    is_admin: 'F',
                    email: '',
                    head_image: {
                        attachment_id: 0,
                        url: '',
                    },
                    head_image_id: '',
                    phone:'',
                    created_at:'',
                    last_login_at:'',

                    realname:'',
                    league_id:0,
                    cup_id:0,
                    age:0,
                    number:0,
                    height:'',
                    weight:'',
                    strength:-1,
                    level:-1,
                    site:'',
                    join_season:'',
                    join_date:'',
                },
                ruleEditUser: {
                    name: [
                        {required: true, message: '请填写昵称', trigger: 'blur'}
                    ],
                },
                uploadConfig: {
                    headers: {
                        'Authorization': localStorage.access_token_type + ' ' + localStorage.access_token,
                    },
                    format: ['jpg', 'jpeg', 'png'],
                    max_size: 500,
                    uploadUrl: window.uploadUrl.uploadAvatar
                },
            }
        },
        created() {
            let t = this;
            t.getUserInfo(t.editUserForm.id);
            t.getLeagueList();
            t.getCupList();
        },
        methods: {
            get_select_strength(e){
                this.editUserForm.strength = e;
            },
            get_select_level(e){
                this.editUserForm.level = e;
            },
            get_join_date(e){
                this.editUserForm.join_date = e;
            },
            get_select_league(e){
                console.log('get_select_league');
                console.log(e);
                this.editUserForm.league_id = e;
            },
            set_open_loading(){
                if(!this.league_loading && !this.cup_loading && !this.info_loading){
                    this.open_loading = false;
                }
            },
            getLeagueList() {
                this.league_loading = true;
                let t = this;
                t.$util.ajax.get('/admin/leagues').then(function (response) {
                    let response_data = response.data;
                    t.leagueList = response_data.data;
                    console.log(t.leagueList);
                    t.league_loading = false;
                    t.set_open_loading();
                }, function (error) {
                    t.$Notice.warning({
                        title: '出错了',
                        desc: error.message
                    });
                    t.league_loading = false;
                    t.set_open_loading();
                })
            },
            get_select_cup(e){
                console.log('get_select_cup');
                console.log(e);
                this.editUserForm.cup_id = e;
            },
            getCupList() {
                this.cup_loading = true;
                let t = this;
                t.$util.ajax.get('/admin/cups').then(function (response) {
                    let response_data = response.data;
                    t.cupList = response_data.data;
                    console.log(t.cupList);
                    t.cup_loading = false;
                    t.set_open_loading();
                }, function (error) {
                    t.$Notice.warning({
                        title: '出错了',
                        desc: error.message
                    });
                    t.cup_loading = false;
                    t.set_open_loading();
                })
            },
            getUserInfo(id) {
                this.info_loading = true;
                let t = this;
                t.$util.ajax.get('/admin/users/' + id).then(function (response) {
                    let response_data = response.data;
                    t.editUserForm = response_data.data;
                    t.editUserForm.head_image.attachment_id = response_data.data.head_image.attachment_id;
                    console.log( t.editUserForm.league_id);
                    if(!t.editUserForm.league_id){
                        t.editUserForm.league_id = 0;
                    }else{
                        t.editUserForm.league_id = parseInt(t.editUserForm.league_id);
                    }
                    if(!t.editUserForm.cup_id){
                        t.editUserForm.cup_id = 0;
                    }else{
                        t.editUserForm.cup_id = parseInt(t.editUserForm.cup_id);
                    }
                    if(!t.editUserForm.strength){
                        t.editUserForm.strength = -1;
                    }else{
                        t.editUserForm.strength = parseInt(t.editUserForm.strength);
                    }
                    if(!t.editUserForm.level){
                        t.editUserForm.level = -1;
                    }else{
                        t.editUserForm.level = parseInt(t.editUserForm.level);
                    }
                    t.info_loading = false;
                    t.set_open_loading();
                }, function (error) {
                    t.$Notice.warning({
                        title: '出错了',
                        desc: error.message
                    });
                    t.info_loading = false;
                    t.set_open_loading();
                })
            },
            handleSubmit() {
                let t = this;
                t.$refs.editUserForm.validate((valid) => {
                    if (valid) {
                        t.loading = true;
                        this.$util.ajax.patch('/admin/users/' + t.editUserForm.id, t.editUserForm).then(function (response) {
                            t.$Notice.success({
                                title: '资料修改成功'
                            });
                            t.loading = false;
                        }, function (error) {
                            t.loading = false;
                            t.$Notice.warning({
                                title: '出错了',
                                desc: error.message
                            });
                        })
                    }
                });
            },
            handleSuccess(res, file) {
                let res_data = res.data;
                file.url = res_data.url;
                file.name = res_data.original_name;
                this.editUserForm.head_image.attachment_id = res_data.attachment_id;
                this.editUserForm.head_image.url = res_data.url;
            },
            handleFormatError(file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize(file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 ' + this.uploadConfig.max_size + 'kb'
                });
            },
        }
    }

</script>
